<template>
<div class="main">
  <!-- 头部导航栏 -->
  <head-component :noBack="false"  title="我的钱包"/>

<!-- 资产-->
  <div class="top">
    <div class="t col_ff">
      <p>{{userInfo.total}}</p>
      <span class='f28'>账户余额（元）</span>
    </div>
    <ul>
      <li class="col_ff">
        <p class="f42">{{userInfo.m_money1}}</p>
        <span class="f28">团队奖收益</span>
      </li>
      <li class="col_ff">
        <p class="f42">{{userInfo.m_money2}}</p>
        <span class="f28">佣金收益</span>
      </li>
    </ul>
  </div>

<!--  明细-->
  <div class="mxCon">
    <div class="tit"><p class="f36 col_33">明细</p></div>
    <div class="con">
      <div class="list"  v-for="(item,i) in mxList" :key="i">
        <div>
          <p class="f32 col_33 oneline">{{item.title}}</p>
          <span  class="f24 col_99">{{item.a_time}}</span>
        </div>
        <div  class="f34 col_66">
          <p class="f30" v-if="item.type==1" style="color: #fd5f5f">+{{item.money}}</p>
          <p class="f30 col_33" v-else-if="item.type==2">-{{item.money}}</p>
          <span  class="f26 col_99" v-if="item.status==0">审核中</span>
          <span  class="f26 col_99" v-else-if="item.status==1">已审核</span>
          <span  class="f26 col_99" v-else>已拒绝</span>
        </div>
      </div>
      <!-- 如果内容列表为空 -->
      <div class="null_list" v-if="mxList == ''">
        <img class="null_img" src="@/common/icon/nothing.png" alt="">
        <div class="null_title">暂无数据</div>
      </div>
    </div>
  </div>

<!--  <div class="global_btn">提现</div>-->
  <router-link tag="div" to="/withdraw"  class="global_btn">提现</router-link>

</div>
</template>

<script>
import headComponent from '@/components/layout/head'
export default {
    name: "wallet.vue",
    data() {
      return {
        mxList:[],
        userInfo:{},
        txt:['申请中','已审核','已拒绝']
      }
    },
  created(){
    var $this = this;
    $this.getCon();
  },
  methods: {
    getCon(){
      var $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      var data = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
      $this.$axios.post('index.php?m=user&c=wallet',data)
        .then((res) => {
          t.clear();
          if(res.data.code == 1){
            $this.userInfo = res.data.user;
            $this.mxList= res.data.data;
          }else{
            $this.$toast({
              message: '请先登录',
              duration: 800,
              onClose:()=>{
                $this.$router.push('/login');
              }
            })

          }
        })
    },
  },
    components: {
      headComponent
    },
}
</script>

<style scoped lang="less">
  .null_list{ margin-top: 1rem }
  .oneline{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
  .layout-head{border-bottom: 0.02rem solid #f5f5f5;}
  .top{width: 92%;margin: 1.733rem auto 0;height: 4.93rem;text-align: center;background: url("~@/common/icon/bg1.png") no-repeat;
    background-size: 100% 100%;overflow: hidden;
    .t{margin-top: 0.8rem;
      p{font-size: 0.8rem;font-weight: 600;}
      span{display: block;opacity: 0.5;}
    }
    ul{width: 100%;overflow: hidden;margin-top: 0.9rem;
      li{
        float: left;
        width: 50%;
        span{
          display: block;opacity: 0.5;margin-top: 0.1rem;
        }
      }
    }
  }
  .mxCon{
    width: 100%;
    margin-top: 0.8rem;
    margin-bottom: 1.8rem;
    .tit{
      width: 92%;overflow: hidden;
      margin: 0 auto;
      line-height: 0.48rem;
      border-bottom:0.02rem solid #f5f5f5 ;
      padding-bottom: 0.5333rem;
      p{
        float: left;
        padding-left: 0.266rem;
        border-left: 0.133rem solid #409aff;
        font-weight: 600;
      }
      span{
        float:right;}
    }
    .con{
      width: 92%;
      margin: 0 auto;
      .list{
        width: 100%;
        overflow: hidden;
        padding: 0.666rem 0;
        border-bottom:0.02rem solid #f5f5f5 ;
        div:nth-child(1){
          float: left;
          width: 70%;
          p{margin-bottom: 0.2666rem}
          span{display: block}
        }
        div:nth-child(2){float: right;text-align: right;margin-top: 0.08rem;;
          p{margin-bottom: 0.25rem}
          span{display: block}
        }
      }
    }
  }
  .global_btn{width: 92%;position: fixed;bottom: 0.3rem;left: 4%; z-index: 999;}
</style>
